import React, {  useState } from 'react'
import {
    Form,
    Input,
    Button,
    ImageUploader,

} from 'antd-mobile'

import { upload } from "../../service/utils"
import  {userEdit} from  "../../service/mineService"
import { useNavigate } from "react-router-dom"
import { ImageUploadItem } from 'antd-mobile/es/components/image-uploader'
export default function Edit() {
    let nagNavigate = useNavigate();
    let [file,setFile] = useState<any>();
    const [fileList, setFileList] = useState<ImageUploadItem[]>([
        {
          url: "/api2/prod-api/profile/upload/image/2021/05/10/31a6533c-bf60-4890-9a25-b18db764776a.png",
        },    
    ])

    const onFinish = async (values: any) => {
        if(file){
            let formData  = new FormData();
            formData.append("file",file);
            let res  = await  upload(formData);
            let  avatar= "/prod-api"+res.data.fileName;
            let  nickName = values.nickName;   //
            let  res2  = await userEdit({
                nickName,
                avatar
            })
             if(res2.data.code===200){
                nagNavigate("/mine");
             }
            //调用编辑的接口
        }else{
      
            let  nickName = values.nickName;   //
            let  res2  = await userEdit({
                nickName,
            })
             if(res2.data.code===200){
                nagNavigate("/mine");
             }
        }
        // console.log(file);
        // console.log(values);
    }
    function mockUpload(file: any) {
        setFile(file);
        return {
            url: URL.createObjectURL(file),
        } as any;
    }
    let  fileChange  = (list:any)=>{//是一个集合
        let newList = [...list];
        newList.splice(0,1);
        setFileList(newList);  
    }

    return (
        <>

            <Form
                layout='horizontal'
                name='form'
                onFinish={onFinish}
                footer={
                    <Button block type='submit' color='primary' size='large'>
                        提交
                    </Button>
                }
            >
                <Form.Item name='avatar'  label='头像' extra={<ImageUploader value={fileList} onChange={fileChange}  deletable={false} upload={mockUpload} multiple={false} preview={false} maxCount={2}>
                    <div
                        style={{
                            width: 100,
                            height: 100,
                            borderRadius: 50,
                            backgroundColor: '#f5f5f5',
                            display: 'flex',
                            justifyContent: 'center',
                            alignItems: 'center',
                            color: '#999999',
                            zIndex:1000,
                            opacity:0
                        }}
                    >
                    
                    </div>
                </ImageUploader>}  >


                    {/* <Avatar src="/api2/prod-api/profile/upload/image/2021/05/10/31a6533c-bf60-4890-9a25-b18db764776a.png" />
            */}
                    {/* <ImageUploader value={fileList} onChange={setFileList} upload={mockUpload}>
                        <div
                            style={{
                                width: 80,
                                height: 80,
                                borderRadius: 40,
                                backgroundColor: '#f5f5f5',
                                display: 'flex',
                                justifyContent: 'center',
                                alignItems: 'center',
                                color: '#999999',
                            }}
                        >
                            <PictureOutline style={{ fontSize: 32 }} />
                        </div>
                    </ImageUploader> */}
                </Form.Item>
                <Form.Item name='nickName' label='昵称' rules={[{ required: true }]}>
                    <Input placeholder='请输入昵称' />
                </Form.Item>


            </Form>
        </>
    )
}
